<template>
  <div class="w">
    <!-- 标题 -->
    <div class="title-area">
      <span>
        产品信息新增
      </span>
    </div>

    <!-- 表单区 -->
    <Form style="margin-top: 35px;" 
      name="form" 
      ref="form" 
      :labelCol="labelCol" 
      :wrapperCol="wrapperCol" 
      :initialValues="{}">

      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="produceName" label="产品名称">
            <Input placeholder="请输入产品名称" style="width: 100%" v-model="form.produceName" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="firmId" label="厂商名称">
            <Select
                placeholder="请输入厂商名称进行搜索"
                style="width: 100%"
                v-model="form.firmId"
                allowClear>
                <Option v-for="firm in firmList" :key="firm.firmId" :value="firm.firmId.toString()" :label="firm.firmName" />
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="release" label="版本号">
            <Input placeholder="请输入版本号" style="width: 100%" v-model="form.release" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="remark" label="产品描述">
            <Input placeholder="请输入产品描述" style="width: 100%" v-model="form.remark" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="medium" label="产品介质">
            <Upload></Upload>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="document" label="产品手册">
            <Upload></Upload>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="platform" label="适用平台">
              <Select
                  type="multiple"
                  style="width:100%"
                  :value="modelValue"
                  @change="platformsOnChange"
                  allowClear>
                <Option value="1" label="x86-64_centOS" />
                <Option value="2" label="龙芯_麒麟" />
                <Option value="3" label="海光_中科方德" />
                <Option value="4" label="飞腾_凝思" />
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row style="margin-top: 50px;">
        <Col :span="12" :offset="6">
          <FormItem :wrapperCol="{ span: 24 }" style="text-align: center">
            <Button style="width: 100px;" type="primary" @click="showConfirmDialog">提 交</Button>
            <Button style="width: 100px; margin-left: 20px;" @click="cancel">取 消</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>

    <!-- 提交确认框 -->
    <Modal title="提交确认"
      v-model="isModalVisible"
      @ok="submit"
      @cancel="isModalVisible = false"
      centered>
      <p>即将新增新的产品信息，是否确认？</p>
    </Modal>

  </div>
</template>

<script>
import { Notification, Message } from '@uni/vue';
import { listFirm } from "@/api/doapp/firm";
import { addProduce } from "@/api/doapp/produce";

import Upload from '@/components/upload/index'
export default {
    name: "app",
    components: {
        Upload
    },
    data() {
      return {
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },

      firmList: [],
      modelValue: [],
      form: {
        createBy: '',
        createTime: '',
        firmId: '',
        params: '',
        platform: '',
        produceName: '',
        release: '',
        remark: '',
        searchValue: '',
        updateBy: '',
        updateTime: ''
      },
      isModalVisible: false
    }
  },
  mounted: function () {
    this.queryFirmList();
  },
  methods: {
    queryFirmList: async function () {
      const rs = await listFirm();
      if (rs.code !== 200) return Message.error({ text: '获取厂商列表信息失败：' + rs.msg });
      
      // console.log("rs: ", rs);
      this.firmList = rs.rows;
    },
    validateForm: function () {
      // let validateMsg;
      // if (!this.form.firmName) validateMsg = '请填写厂商名称';
      // else if(!this.form.address) validateMsg = '请填写厂商地址';
      // else if(!this.form.linkMan) validateMsg = '请填写厂商联系人';
      // else if(!this.form.linkPhone) validateMsg = '请填写联系人电话';

      // if (validateMsg) return Notification.warning({ message: validateMsg });
      return true;
    },
    showConfirmDialog: function () {
      console.log("### showConfirmDialog: ", this.form);

      // this.form.isInCatalog = this.isInCatalog === '是';
      // if (!this.validateForm()) return;
      // this.isModalVisible = true;
    },
    platformsOnChange(val) {
      this.modelValue = val;
      console.log("this.modelValue: ", this.modelValue.join(','));
    },
    submit: function () {
      console.log("Submit...");
    },
    cancel: function () {
      this.$router.push('/productInfoMgr');
    }
  }
}
</script>

<style scoped>
  .w {
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }
</style>
